<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/zTree_v3/js/zTreeStyle.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
    <script src="../plugins/zTree_v3/js/jquery-2.2.3.min.js"></script>
    <script src="../plugins/zTree_v3/js/jquery.ztree.all.min2.js"></script>
</head>
<body>
<div class="layui-container">
    <form class="layui-form">

        <div class="layui-container">
            <fieldset class="layui-elem-field" style="margin-top: 20px;width: 100%;height: 100%">
                <legend>角色用户管理</legend>




                    <div class=" layui-form" >
                        <div class="layui-form-item"  >

                            <div class="layui-input-inline" style="width: 100px">

                                <label class="layui-form-label">用户名称</label>
                            </div>

                            <div class="layui-input-inline">

                                <select class="layui-input-inline" id="searchRole"  lay-search>

                                    <option value=""></option>
                                </select>
                                <input type="hidden" id="jsid" name="jsid">

                            </div>





                            <div class="layui-input-inline " style=" width:10%; position: absolute;right: 0 ">
                                <button type="button" class="layui-btn layui-btn-normal" id="new">添加到下方</button>

                            </div>



                        </div>
                    </div>

                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <script type="text/html" id="opera">
                            <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delUser">删除</button>
                        </script>
                        <table id="table" lay-filter="Table" ></table>

                    </div>
                </div>

            </fieldset>

        </div>
    </form>
</div>

</body>
<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    layui.use(['table','form','layer','laydate','upload'],function () {

        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var tableheight= 'full-180';
        var tablewidth = 75;
        var currentPage = 1;
        var rolejson = {};

        if($("#isU").val() == "false"){
            $("#new").attr("disabled",true);
            $("#new").addClass("layui-btn-disabled");

        }

//渲染用户模糊搜索
        $.ajax({
            url: contextPath+"/user",
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {

                for(var i in res.list){
                    var option = "<option value='"+ res.list[i].yhid+ "'>"+res.list[i].yhm+"/"+res.list[i].sjh+"/"+res.list[i].zsxm+"</option>";
                    $("#searchRole").append(option);
                };
                form.render('select');

            }
        });
 //渲染角色用户表格
        $.ajax({
            url: contextPath+"/role?jsid="+$("#jsid").val(),
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {

                table.render({
                    elem: '#table'
                    ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                    ,data:res.list
                    ,page: {
                        curr: currentPage //重新从第 1 页开始
                        ,layout:['prev', 'page', 'next','skip','count']
                    } //开启分页
                    ,limit:10
                    ,cellMinWidth: 1
                    ,cols: [[ //表头
                        {type:'numbers', title: '序号',  align:'center'}
                        ,{field: 'yhm', title: '用户名' ,align:'center'}
                        ,{field: 'zsxm', title: '真实姓名' ,align:'center'}
                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera','width':150}
                    ]]
                    ,done: function(res, curr, count){
                        //得到当前页码
                        currentPage = curr;
                    }
                });
            }
        });
//添加用户


        $("#new").on('click',function () {
            if($("#searchRole").val() == ""){
                layer.msg("请选择想要添加的用户！");
            }else {
                var userRole = {};
                userRole.jsid = $("#jsid").val();
                userRole.yhid = $("#searchRole").val();

                console.log(userRole);
                $.ajax({
                    url: contextPath+"/user/role" ,
                    type: "POST",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    data:JSON.stringify(userRole),
                    success: function(res) {
                        layer.msg(res.message);
                        $.ajax({
                            url: contextPath+"/role?jsid="+$("#jsid").val(),
                            type: "GET",
                            contentType:"application/json;charset=utf-8",
                            dataType:"json",
                            success: function(res) {
                                table.render({
                                    elem: '#table'
                                    ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                                    ,data:res.list
                                    ,page: {
                                        curr: currentPage //重新从第 1 页开始
                                        ,layout:['prev', 'page', 'next','skip','count']
                                    } //开启分页
                                    ,limit:10
                                    ,cellMinWidth: 1
                                    ,cols: [[ //表头
                                        {type:'numbers', title: '序号',  align:'center'}
                                        ,{field: 'yhm', title: '用户名' ,align:'center'}
                                        ,{field: 'zsxm', title: '真实姓名' ,align:'center'}
                                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera','width':150}
                                    ]]
                                    ,done: function(res, curr, count){
                                        //得到当前页码
                                        currentPage = curr;
                                    }
                                });
                            }
                        });
                    }
                });
            }

        });





 //监听工具
        //监听工具条
        table.on('tool(Table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'delUser') {

                    obj.del(); //删除对应行（tr）的DOM结构

                    //向服务端发送删除指令
                    var userRoledel = {};
                userRoledel.yhid = data.yhid;
                userRoledel.jsid = data.jsid;
                console.log(userRoledel);
                    $.ajax({
                        url: contextPath + "/user/role" ,
                        type: "DELETE",
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        data:JSON.stringify(userRoledel),
                        success: function (res) {
                            layer.msg(res.message);
                            $.ajax({
                                url: contextPath+"/role?jsid="+$("#jsid").val(),
                                type: "GET",
                                contentType:"application/json;charset=utf-8",
                                dataType:"json",
                                success: function(res) {
                                    table.render({
                                        elem: '#table'
                                        ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                                        ,data:res.list
                                        ,page: {
                                            curr: currentPage //重新从第 1 页开始
                                            ,layout:['prev', 'page', 'next','skip','count']
                                        } //开启分页
                                        ,limit:10
                                        ,cellMinWidth: 1
                                        ,cols: [[ //表头
                                            {type:'numbers', title: '序号',  align:'center'}
                                            ,{field: 'yhm', title: '用户名' ,align:'center'}
                                            ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera','width':150}
                                        ]]
                                        ,done: function(res, curr, count){
                                            //得到当前页码
                                            currentPage = curr;
                                        }
                                    });
                                }
                            });
                        }

                });
            }
        });


    });


</script>
</body>
</html>